{extend name="layout/layout" /}


{block name="style"}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.css">
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/css/swiper.min.css"> -->
<style>
	header.mui-bar .search{
		background: #fff;
		text-align: center;
		height: 35px;
		margin-top: 5px;
		border-radius: 5px;
		line-height: 35px;
		color: #a5a5a5;
	}
	
	.search .mui-icon{
		padding: 0;
		color: #a5a5a5;
	}
	.category{
		padding: 10px 0;
		background: #fff;
	}
	
	.category .category-item{
		width:20%;
		float: left;
		padding: 0 10px;
	}
	
	.category .category-item p{
		font-size: 12px;
		margin-bottom: 0;
	}
	
	.hot{
		background: #fff;
		margin-top: 5px;
	}
	.hot .hot-title{
		line-height: 40px;
		border-bottom: 1px solid #ccc;
		padding-left: 10px;
		color:#fff;
		background: url('/assets/mobile/images/index_bg.png');
	}
	
	.hot .price{
		font-size: 10px;
		color:#e60012;
	}
	
	
	.action{
		margin-top: 5px;
		background: #fff;
	}
	
	.action img{
		height: 100px;
		width: 187px;
	}
	
	.recommend{
		background: #fff;
		margin-top: 5px;
		padding-bottom: 20px;
	}
	
	.recommend .mui-row{
		display: flex;
		flex-wrap: wrap;
		width: 100%;
	}
	
	.recommend-title{
		line-height: 40px;
		color:#fff;
		border-bottom: 1px solid #ccc;
		background: url('/assets/mobile/images/index_bg.png');
	}
	
	.goods-name{
		font-size:12px;
		overflow:hidden;
		text-overflow:ellipsis;
		display:-webkit-box;
		-webkit-box-orient:vertical;
		-webkit-line-clamp:2;
		text-align: left;
	}
	
	.recommend p{
		margin-bottom: 5px;
	}
	
	.recommend .mui-col-xs-6{
		padding: 5px;
		background: #fff;
	}
	
	.recommend img{
		height: 197px;
	}
	
	
	.recommend .price{
		color:#e60012;
	}
	
	.tags{
		color: #fff;
	}
	
	.tags .tag{
		padding: 3px 5px;
		font-size: 10px;
		opacity: 0.6;
	}
	
	.hot .img-box{
		height: 77px;
		text-align: center;
	}

	.shop-info{
		background: #fff;
		position: relative;
		color: #999;
	}

	.shop-info .logo{
		position: absolute;
		top: -30px;
		z-index: 9;
		padding: 10px;
	}

	.shop-info .logo img{
		max-width: 75px;
		max-height: 75px;
	}

	.shop-info .shop-top{
		line-height: 30px;
	}

	.swiper-slide{
		max-height: 200px;
		text-align: center;
	}

	.swiper-slide img{
		max-height: 100%;
		max-width: 100%;
	}
</style>
{/block}

{block name="main"}
<div class="index" id="index" v-cloak>
	
	<div class="swiper-container banner-swiper">
		<div class="swiper-wrapper">
			<div class="swiper-slide" v-for="ban in banner">
				<img :src="ban" class="img-responsive" />
			</div>
		</div>
		<!-- 如果需要分页器 -->
		<div class="swiper-pagination"></div>
	
	</div>

	<div class="shop-info mui-row mui-text-center">
		<div class="logo mui-col-xs-3">
			<img :src="shopInfo.logo_image" class="img-responsive" alt="">
		</div>
		<div class="mui-col-xs-3"></div>
		<div class="goods-name mui-col-xs-4 mui-text-center">
			<div class="shop-top">{{shopInfo.goods_number}}</div>
			<div>全部宝贝</div>
		</div>
<!-- 		<div class="goods-name mui-col-xs-3 mui-text-center">
			<div class="shop-top">{{shopInfo.goods_number}}</div>
			<div>收藏本店</div>
		</div> -->
		<div class="qrcode mui-col-xs-5 mui-text-center" @click="show_share()">
			<div class="shop-top"><span class="mui-icon iconfont icon-erweima"></span></div>
			<div>二维码</div>
		</div>
	</div>

	<!-- 为你推荐开始 -->
	<div class="mui-row  recommend">
		<div class="box">
			<div>
			<div class="mui-row" v-if="recommend.length > 0">
				<div class="mui-col-xs-6" v-for="rec in recommend">
					<a  @tap="toDetail(rec.id)">
						<img :src="rec.original_image" class="img-responsive" alt="">
						<p class="">
							<span class="price">积分抵扣 {{rec.point}} 元</span>
							<span class="del-price mui-pull-right">￥{{rec.shop_price}}</span>
						</p>
						<p class="">
							<span class="price">VIP收益 {{rec.sendmoney}} 元</span>
							<span class="del-price mui-pull-right">销量:{{rec.sale_number}}件</span>
						</p>
						<p class="goods-name ellipsis-2">{{rec.goods_name}}</p>
					</a>
				</div>
			</div>
			<div class="no-data" v-else>没有相关商品</div>
			</div>
		</div>

	</div>
	<!-- 为你推荐结束 -->


</div>
{/block}

{block name="script"}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.min.js"></script> -->
<script>
	mui.init({
	  pullRefresh : {
	    container:".recommend",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
	    up : {
	      height:50,//可选.默认50.触发上拉加载拖动距离
	      auto:false,//可选,默认false.自动上拉加载一次
	      contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
	      contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
	      callback :function(){
	      	indexVue.getGoods();
	      	this.endPullupToRefresh(indexVue.nextPage);
	      } //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
	    }
	  }
	});


    function search(){
        location.href = "/mobile/index/search";
    }

    var indexVue = new Vue({
        el:'.index',
        data: {
            banner: [],
            recommend: [],
            shopInfo: {},
            page: 1,
            nextPage: false,
            shop_code: ''
        },
        mounted: function(){
            this.getShopInfo();
        },
        methods:{
        	getShopInfo: function(){
				layer.open({
					type:2,
					shadeClose: false
				});

				var that = this;
				var url =  'usershop/getShopInfo';
				request(that, {'url': url, 'data': {}}, function(res){
					layer.closeAll();
					if(res.code == 200) {
						if(res.data) {
							that.shopInfo = res.data;
							that.banner = res.data.imgSrc;
							that.shop_code = 'http://qr.liantu.com/api.php?text='+res.data.shop_url;
							that.bannerSwiper();
							if(res.data.id) {
								that.getGoods();
							}
						}
					} else {
						mui.toast(res.msg);
					}	
				});
			},

            getGoods: function(){
              layer.open({
                    type: 2,
                    shadeClose: false,
                });
                var url =  'usershop/getShopGoods';
                var that = this;
                var data = {
                	page: that.page,
                	shop_id: that.shopInfo.id,
                };

                request(that, {'url':url, 'data': data}, function(res){
                    if(res.code == 200) {
                        layer.closeAll();
                        that.page ++;
                        that.recommend = that.recommend.concat(res.data);
                        if(res.data.length < 20) {
                        	that.nextPage = true;
                        }
                    } else {
                        mui.toast(res.msg);
                    }
                });
            },
            bannerSwiper:function(){
                var bannerSwiper = new Swiper('.banner-swiper', {
                    observer:true, //修改swiper自己或子元素时，自动初始化swiper
                    observeParents:true,//修改swiper的父元素时，自动初始化swiper
                    pagination: {
                        el: '.swiper-pagination',
                    },
                });
            },
            //显示分享二维码
			show_share: function(){
				console.log('aaa');
            	layer.open({
				    content: '<div class="share-box"><img class="img-responsive" src="'+this.shop_code+'"></div>'
				    ,btn: '长按图片保存'
				  });
            	return;

			},
			toDetail: function(id){
					location.href = '/mobile/goods/detail/id/'+id;
				}
        }
    });


</script>
{/block}